<template>
  <div class="collect-page">
<van-nav-bar
 class="bt"
      title="收藏列表"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="lb" v-for="item in list" :key="item.houseCode">
        <ul>
            <li>
              <div class="img"><img :src="`http://liufusong.top:8080${item.houseImg}`" alt=""></div>
                <div class="text">
                  <div class="h4"><h4>{{item.title}}</h4></div>
                  <p>{{item.desc}}</p>
                  <div class="dt">{{item.tags[0]}}</div>
                  <span class="span"><strong>{{item.price}}</strong>元/月</span>
                </div>
            </li>
            <hr>
        </ul>
    </div>
      <!-- <div class="lb">
        <ul>
            <li>
              <div class="img"><img src="http://liufusong.top:8080/uploads/upload_5035dd2cf8b444e464ac281b28420034.jpg" alt=""></div>
                <div class="text">
                  <div><h4>好房子</h4></div>
                  <p>三室/30/月季园(徐汇)</p>
                  <div class="dt">近地铁</div>
                  <span class="span"><strong>2300</strong>元/月</span>
                </div>
            </li>
            <hr>
        </ul>
    </div> -->
</div>
</template>

<script>
import { MyLike } from '@/api/article'
export default {
  data () {
    return {
      list: []
    }
  },
  async created () {
    const res = await MyLike()
    console.log(res)
    this.list = res.body
  }

}
</script>

<style lang="less" scoped>
li{
width: 100%;
display: flex;
height: 120px;
margin-top: 44px;
}
ul{
  position:relative;
}
img{
  width: 140px;
height: 110px;
}
.text{
  margin-left: 10px;
  margin-top: -20px;
}
.h4{
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
p{
  margin-top: -13px;
  color: #afb2b3;
  font-size: 14px;
}
.dt{
  width: 50px;
  background-color:#e1f5f8;
  text-align: center;
  color: #74c4dc;
  height: 20px;
  font-size: 14px;
  margin-bottom: 10px;
}
.span{
  color: #fa5741;
}
strong{
  font-size: 18px;
}
hr{
  color: #ccc;
  border: 2px solid #fafafa;
  margin-top: 10px;
}
.bt{
  position: fixed;
  width: 100%;
  margin-top: -50px;
}
</style>
